<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>31.为LOGO添加关键帧动画</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #34495e;
    height: 100vh;
    width: 100vw;
  }

  div {
    font-size: 4em;
    font-weight: bold;
    text-transform: uppercase;
    color: #9b59b6;
  }

  div>span {
    display: inline-block;
    position: relative;
  }
  /*关键帧 css*/

  .color {
    animation-name: changeColor;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    animation-timing-function: linear;
  }

  @keyframes changeColor {
    50% {
      color: #f1c40f;
      transform: scale(1.5);
    }

    to {
      color: #9b59b6;
      transform: scale(0.5);
    }
  }
</style>

<body>
  <div>houdunren.com</div>
  <script>
    // 1. 将div内的文字转换成数组，再用span 标签包裹
    const div = document.querySelector('div');
    [...div.textContent].reduce(function (pre, cur, index) {
      console.log(pre, cur, index);
      // pre初始值为0，索引为0时和pre的值相等，清空div
      pre == index && (div.innerHTML = '')
      // 为每个字符套上 span标签
      let span = document.createElement('span');
      span.innerHTML = cur;
      div.appendChild(span);
      //鼠标移动的时候为每个span标签增加一个类
      span.addEventListener("mouseover", function () {
        this.classList.add("color");
      });
    }, 0);
    // 为logo 增加关键帧
  </script>
</body>

</html>